<template>
    <BaseDrawer class="flow-drawer" :append-to-body="true" :with-header="false" v-model="isShow" @close="close"
                size="100%">
        <div class="w-full h-full flex flex-col">
            <div class="w-full border-gray-300 border-b p-1.5 flex">
                <div class="flex-1">
                    <el-icon @click="showXml" class="cursor-pointer" :color="primaryColor">
                        <View/>
                    </el-icon>
                </div>
                <div>
                    <el-button type="primary" @click="save" link>保存</el-button>
                    <el-button type="primary" @click="saveDeploy" link>保存并部署</el-button>
                    <el-button type="primary" @click="close" link>关闭</el-button>
                </div>
            </div>
            <div class="flex-1 relative flex">
                <BaseFlowMap ref="flowMapRef"></BaseFlowMap>
                <PropertyPanel ref="propertyPanelRef"></PropertyPanel>
                <ViewXml ref="viewXmlRef"></ViewXml>
            </div>

        </div>
    </BaseDrawer>
</template>

<script setup lang="ts">
import BaseFlowMap from '../../../components/Base/BaseFlowMap/index.vue'
import UserTask from './component/property-panel/panel/UserTask.vue'
import SystemTask from "/@/views/flow/design/component/property-panel/panel/SystemTask.vue";
import ViewXml from './component/ViewXml.vue'
import {nextTick, onMounted, ref} from "vue";
import {bindEvent} from "/@/views/flow/design/ts/FlowEvent";
import PropertyPanel from './component/property-panel/index.vue'
import {createFlow} from "/@/api/flow/BaseFlowApi";
import {useCssVar} from "@vueuse/core";
import {deployFlowDesign, updateFlowDesign} from "/@/api/flow/FlowDesignApi";
import {ElMessage} from "element-plus";
import {nanoid} from 'nanoid'
import {NodeType} from "/@/components/Base/BaseFlowMap/ts/types";

const bpmnViewer = ref()
const primaryColor = ref()
const viewXmlRef = ref()
const propertyPanelRef = ref()
const isShow = ref(false)
const designId = ref()
const definitionKey = ref()
const designName = ref()
const flowMapRef = ref()
const init = (designContent: string, designIdValue: string, definitionKeyValue: string, designNameValue: string) => {
    designId.value = designIdValue
    definitionKey.value = definitionKeyValue
    designName.value = designNameValue
    isShow.value = true
    nextTick(() => {
        flowMapRef.value.init()
        flowMapRef.value.registerPropertyPanel(NodeType.USER_TASK, UserTask)
        if(designContent){
            flowMapRef.value.setData(designContent)
        }

    })

}

const close = () => {
    isShow.value = false
}
const saveDeploy = async () => {
    let data = JSON.stringify(flowMapRef.value.getData())
    await updateFlowDesign({designId: designId.value, designContent:  data, definitionKey: definitionKey.value})
    await deployFlowDesign({
        designId: designId.value,
        designContent: data,
        definitionKey: definitionKey.value,
        designName: designName.value,
    })
    ElMessage.success("部署成功")
}
const save = async () => {
    await updateFlowDesign({designId: designId.value, designContent: JSON.stringify(flowMapRef.value.getData()), definitionKey: definitionKey.value})
    ElMessage.success("保存成功")
}
const showXml = () => {
    //json对象转json字符串并格式化
    viewXmlRef.value.init(JSON.stringify(flowMapRef.value.getData(),null,2))
}

onMounted(() => {
    let colorVar = useCssVar('--el-color-primary')
    primaryColor.value = colorVar.value
})
defineExpose({init})
</script>

<style lang="scss">
@import "../../../theme/custom/flow";

.flow-drawer {
  .el-drawer__body {
    padding: 0px;
    overflow: hidden;

    .bjs-container {
      background: white;
      overflow: auto;
      background-image: linear-gradient(
                      90deg,
                      rgba(220, 220, 220, 0.5) 6%,
                      transparent 0
      ),
      linear-gradient(rgba(192, 192, 192, 0.5) 6%, transparent 0);
      background-size: 12px 12px;
      width: 100%;
      height: calc(100vh - 82px);
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

      .bjs-powered-by {
        display: none;
      }
    }
  }

  .djs-palette {
    display: none;
  }


}


</style>